export const UserAPI = {
    list(){//返回用户数组
        //从localStorage中读取users这个key对应的值
        let usersString = localStorage.getItem('users');
        //判断是否取到值了，如果取到了，则转成js数组，否则 就是空数组
        let users = usersString?JSON.parse(usersString):[];
        //返回此数组
        return users;
    },
    add(user){//向数组中添加一个新的用户
        //先获取老的用户列表数组
        let users = UserAPI.list();
        //把新的用户添加到用户数组中
        users.push(user);
        //再把新的数组保存到localStorage里，以便下一次读取
        localStorage.setItem('users',JSON.stringify(users));
    },
    find(id){//通过id在用户数组中查找指定的用户
         //先获取老的用户列表数组
         let users = UserAPI.list();
         //调用数组的 find方法查找第一个符合条件的元素
         return users.find(user=>user.id === id);
    }
}

export const activeProps = {
    className:({isActive})=>isActive?'active2':'',
    style:({isActive})=>isActive?({color:'orange'}):{}
}


// {{color:'red'}}
//当我们在JSX中想编写JS代码的时候，需要在JS代码的外面包一层{},表示插值表达式
//<div>{1+1} {{color:'red}}</div>

//js和jsx
//js就是普通的JS
//jsx是一种特殊语法，可以写<div></div>，里面如果想嵌套js代码的话外面要套{}
//jsx语法不是标准的JS写法，只是一个语法糖，最终还要经过 babel转换成普通的JS